<ion-view id="home" view-title="home" cache-view="false">
  <!--  cache-view="false"控制缓存页面-->
  <!--头部搜索栏-->
  <div id="headerBar" class="headerBar">
    <div id="headerBar-bg"></div>
    <div class="headerBar-logo">
      <i></i>
    </div>
    <a class="headerBar-search"  ng-href="#">
      <span></span>
      <div>
        <input  maxlength="20" autocomplete="true" value="搜索美食"/>
      </div>
    </a>
    <a class="headerBar-login" href="./areas/login/login.html">
        <span>
          登录
        </span>
    </a>
  </div>
  <ion-content id="home-content" class="scroll-content" scroll="false">
    <!--头部滚动条-->
    <div class="headerSlider">
      <div id="headerSlider" class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" ng-repeat="item in headerSlideData">
            <img ng-src="{{item.src}}">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>

    <!-- 功能导航 -->
    <nav id="nav">
      <span ui-sref="tab.category">
        <img ng-src="img/home/dish.png" alt="">
        <h2>菜式推荐</h2>
      </span>
      <span>
        <img ng-src="img/home/foods.png" alt="">
        <h2>餐厅推荐</h2>
      </span>
      <span>
        <img ng-src="img/home/nearby.png" alt="">
        <h2>附近美食</h2>
      </span>
      <span>
        <img ng-src="img/home/entertainment.png" alt="">
        <h2>休闲娱乐</h2>
      </span>
      <span>
        <img ng-src="img/home/takeaway.png" alt="">
        <h2>外卖</h2>
      </span>
      <span>
        <img ng-src="img/home/leaf.png" alt="">
        <h2>生活服务</h2>
      </span>
    </nav>
    <!--推荐-->
    <div class="dish">
      <div class="recommend">-  美食专题  -</div>
      <img src="img/home/activity.png" alt=""/>
    </div>

    <!--标签-->
    <div class="label">
      <div class="label1">早餐</div>
      <div class="label1">烘焙</div>
      <div class="label1">海鲜</div>
      <div class="label1">素食</div>
      <div class="label1">便当</div>
    </div>

    <!--summer-->
    <span class="summer">
      <span class="hot">-热门推荐-</span>
      <img src="img/home/summer.png" alt=""/>
    </span>

    <!--瀑布流-->
    <div class="container">
      <div class="waterfall">

        <div class="pin">
          <img src="img/home/liu1.png" />
          <h4>华夫饼给你营养早餐</h4>
          <p>1 convallis timestamp</p>
        </div>

        <div class="pin">
          <img src="img/home/liu2.png" />
          <h4>蓝莓低卡又健康</h4>
          <p>
            2 Nullam eget lectus augue. Donec eu sem sit amet ligula
            faucibus suscipit. Suspendisse rutrum turpis quis nunc
            convallis quis aliquam mauris suscipit.
          </p>
        </div>

        <div class="pin">
          <img src="img/home/liu3.png" />
          <h4>沙拉的美味萦绕味蕾</h4>
          <p>
            3 Donec a fermentum nisi. Integer dolor est, commodo ut
            sagittis vitae, egestas at augue.
          </p>
        </div>

        <div class="pin">
          <img src="img/home/liu4.jpg" />
          <h4>柠檬下午茶酸甜又提神</h4>
          <p>
           4 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Sed feugiat consectetur pellentesque. Nam ac elit risus,
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
          </p>
        </div>

        <div class="pin">
          <img src="img/home/liu5.jpg" />
          <h4>你的夏日草莓</h4>
          <p>
            5 Nullam eget lectus augue. Donec eu sem sit amet ligula
            faucibus suscipit. Suspendisse rutrum turpis quis nunc
            convallis quis aliquam mauris suscipit.
            Duis rutrum porta tortor ut convallis.
          </p>
        </div>

        <div class="pin">
          <img src="img/home/liu6.jpg" />
          <h4>蜜汁柠檬口感香甜</h4>
          <p>
           6 Nullam eget lectus augue.
          </p>
        </div>

      </div>
    </div>
    <!--回到顶部的区块-->
    <div class="back_top"></div>
  </ion-content>
</ion-view>
